/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2018-01-10 23:17:10
 * @Last Modified time: 2018-01-10 23:17:10
 * @Description: 矩形 
 */

window.onload = function () {
  var canvas = document.querySelector('.canvas')
  var ctx = canvas.getContext('2d')

  var w = canvas.width
  var h = canvas.height

  ctx.fillStyle = 'Hotpink'
  ctx.fillRect(50, 50, 100, 100)

  ctx.strokeStyle = 'Hotpink'
  ctx.strokeRect(300, 50, 100, 100)

  ctx.fillStyle = 'orange'
  ctx.rect(100, 100, 100, 100)
  ctx.fill()

  ctx.strokeStyle = 'orange'
  ctx.rect(350, 100, 100, 100)
  ctx.stroke()

  document.querySelector('.btn').addEventListener('click', function () {
    // ctx.clearRect(100,100,50,50)
    ctx.clearRect(0, 0, w, h)
  })

}